<template>
	<div class='container'>
		<h2>iframe 浏览器自带</h2>
		<iframe src="/demo.pdf" width="100%" height="400" frameborder="0"></iframe>
		<h2>vue3-pdf-app <a href="https://www.npmjs.com/package/vue3-pdf-app" target="_block">https://www.npmjs.com/package/vue3-pdf-app</a></h2>
		<vue-pdf-app :config="config" theme="dark" style="height: 400px;" pdf="/demo.pdf"></vue-pdf-app>
	</div>
</template>

<script setup>
import VuePdfApp from "vue3-pdf-app";
import "vue3-pdf-app/dist/icons/main.css";
import { ref } from 'vue';

const config = {
	sidebar: {
		// viewThumbnail: true, 原来的配置
		viewThumbnail: false,
		// viewOutline: true, 原来的配置
		viewOutline: false,
		// viewAttachments: true, 原来的配置
		viewAttachments: false,
	},
	secondaryToolbar: {
		secondaryPresentationMode: true,
		secondaryOpenFile: true,
		secondaryPrint: true,
		secondaryDownload: true,
		secondaryViewBookmark: true,
		firstPage: true,
		lastPage: true,
		pageRotateCw: true,
		pageRotateCcw: true,
		cursorSelectTool: true,
		cursorHandTool: true,
		scrollVertical: true,
		scrollHorizontal: true,
		scrollWrapped: true,
		spreadNone: true,
		spreadOdd: true,
		spreadEven: true,
		documentProperties: true,
	},
	toolbar: {
		toolbarViewerLeft: {
			findbar: true,
			previous: true,
			next: true,
			pageNumber: true,
		},
		toolbarViewerRight: {
			presentationMode: true,
			openFile: true,
			print: true,
			download: true,
			viewBookmark: true,
		},
		toolbarViewerMiddle: {
			zoomOut: true,
			zoomIn: true,
			scaleSelectContainer: true,
		},
	},
	errorWrapper: true,
};
</script>
<style lang='less' scoped>
.container {}
</style>
